<template>
    <div class="img">
        <div class="header">
            <div class="text">安全检测预警平台</div>
        </div>
        <div class="headerbottom">
            <div class="headerLeft">
                <img :src="imgUrl1" alt="图片" @click="changeImg">
                <img :src="imgUrl2" alt="图片" @click="changeImg_">
                <!-- <img style="width:100%;height:100%" :src="bgImageUrl.img1" alt=""> -->
            </div>
            <div class="headerRight">
                <div class="img1" :style="{ background: `url(${bgImageUrl.img1})` }">
                    <!-- <img style="width:1.5rem;height:1.5rem; margin-right: -0.25rem;" src="@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/预警图标.png" alt=""> -->
                </div>
                <div class="img2" :style="{ backgroundImage: `url(${bgImageUrl.img2})` }">
                    <div class="text">
                        <span class="title">{{ textColor }}</span>
                        <span class="monitor">{{ monitorName }} {{ warnTime }}</span>
                    </div>
                </div>
                <div class="img3">
                    <div class="text">
                        <div class="week">
                            星期二
                        </div>
                        <div class="date">
                            202312/5 19:20:12
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import request from '@/utils/http'
export default {
    name: '',
    data() {
        return {
            imgUrl1: require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/一张图-默认.png'),
            imgUrl2: require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/指挥调度-2-选中.png'),
            bgImages: [],
            bgImageIndex: 0,//当前背景图片索引
            textColor: '',//文字根据颜色显示不同预警文字
            monitorName: '',
            warnTime: '',
            bgImageUrl: {
                img1: '',
                img2: ''
            }//当前背景图片路径
        };
    },
    mounted() {
        this.realtimewarning();
        this.changeImg_();
    },
    methods: {
        changeImg() {
            this.imgUrl1 = require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/一张图-选中.png')
            this.imgUrl2 = require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/指挥调度-默认.png')
            this.$router.push({ name: 'onepicture' })
        },
        changeImg_() {
            this.imgUrl1 = require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/一张图-默认.png'),
                this.imgUrl2 = require('@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/指挥调度-2-选中.png')
            this.$router.push({ name: 'commandDispatch' })
        },
        //实时计时器改变图片
        realtimer() {
            const callback = () => {
                console.log(1);
                console.log(this.bgImages);
                this.bgImageIndex = (this.bgImageIndex) % this.bgImages.length;
                this.bgImageUrl.img1 = this.bgImages[this.bgImageIndex].img1;
                this.textColor = this.bgImages[this.bgImageIndex].textColor
                this.bgImageUrl.img2 = this.bgImages[this.bgImageIndex].img2;
            }
            const p = new Promise((resolve, reject) => {
                callback();
                resolve(); 
            }).then(res => {
                setInterval(() => {
                    this.bgImageIndex = (this.bgImageIndex + 1) % this.bgImages.length;
                    this.bgImageUrl.img1 = this.bgImages[this.bgImageIndex].img1;
                    this.textColor = this.bgImages[this.bgImageIndex].textColor
                    this.bgImageUrl.img2 = this.bgImages[this.bgImageIndex].img2;
                    this.monitorName = this.bgImages[this.bgImageIndex].monitorName;
                    this.warnTime = this.bgImages[this.bgImageIndex].warnTime
                }, 5000);
            })
            
        },
        // 实时预警
        realtimewarning() {
            request.get('/screen/warn/getRealTimeWarn', {

            }, {})
                .then(res => {
                    // console.log(res.data);
                    let arr = res.data.map((item, i) => {
                        return {
                            monitorName: item.monitorName,
                            warnLevel: item.warnLevel,
                            warnTime: item.warnTime
                        }
                    });
                    this.isbackgroundColor(arr)
                })
        },
        // 根据给定的warnLevel判断显示相应的颜色
        isbackgroundColor(arr) {
            arr.map((item, i) => {
                if (item.warnLevel == '0') {
                    item.textColor = '红色预警'
                    item.img1 = require('@/assets/imgs/20231207监测大屏切图/20240102图标/20240102图标/报警-红色.png')
                    item.img2 = require('@/assets/imgs/20231207监测大屏切图/20240102图标/20240102图标/预警背景-红色.png');
                } else if (item.warnLevel == '1') {
                    item.textColor = '橙色预警'
                    item.img1 = require('@/assets/imgs/20231207监测大屏切图/20240102图标/20240102图标/预警图标-橙色.png');
                    item.img2 = require('@/assets/imgs/20231207监测大屏切图/20240102图标/20240102图标/预警-橙色.png');
                } else if (item.warnLevel == '2') {
                    item.textColor = '黄色预警'
                    item.img1 = require('@/assets/imgs/20231207监测大屏切图/20240102图标/20240102图标/报警-黄色.png');
                    item.img2 = require('@/assets/imgs/20231207监测大屏切图/20240102图标/20240102图标/预警背景-黄色.png');
                } else {
                    item.textColor = '蓝色预警'
                    item.img1 = require('@/assets/imgs/20231207监测大屏切图/20240102图标/20240102图标/报警-蓝色.png');
                    item.img2 = require('@/assets/imgs/20231207监测大屏切图/20240102图标/20240102图标/预警背景-蓝色.png');
                }
            })
            this.bgImages = arr;
            this.realtimer();
        }
    }
}
</script>
<style scoped lang="less">
.img {
    width: 100%;
    height: 148px;
    position: relative;

    .header {
        width: 100%;
        height: 148px;
        background: url(@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/中间导航.png) no-repeat center;

        img {
            width: 100%;
            height: 100%;
        }

        .text {
            font-family: 'youshebiaoti';
            color: white;
            font-size: 45px;
            position: absolute;
            letter-spacing: 10px;
            left: 50%;
            top: 10%;
            transform: translateX(-50%);
            text-shadow: 0px 7px black;
        }
    }

    .headerbottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        width: 100%;
        top: 35%;

        .headerLeft {
            width: 30%;
            display: flex;
            justify-content: space-around;

            img {
                width: 150px;
                height: 40px;
            }
        }

        .headerRight {
            width: 30%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-right: 15px;

            .img1 {
                width: 70px;
                height: 70px;
                background: no-repeat center;
                background-size: cover;
                animation-name: warning;
                animation-duration: 1s;
                opacity: .6;
                animation-iteration-count: infinite;
            }

            @keyframes warning {
                50% {
                    width: 70px;
                    height: 70px;
                    opacity: 1;
                }
            }

            .img2 {
                width: 279.2px;
                height: 60.2px;
                background: no-repeat center;
                background-size: cover;

                .text {
                    color: #FFE8E3;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    flex-direction: column;
                    width: 100%;
                    height: 100%;

                    .title {
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        line-height: 16px;
                        margin-left: -100px;
                    }

                    .monitor {
                        font-size: 16px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        line-height: 15px;
                    }
                }
            }

            .img3 {
                width: 200px;
                height: 74px;
                background: url(@/assets/imgs/20231207监测大屏切图/20231207监测大屏切图/日期.png);
                background-size: contain;

                .text {
                    color: #FFFFFF;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;

                    .week {
                        font-size: 20px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        line-height: 19px;
                        white-space: nowrap;
                        margin-left: 10px;
                    }

                    .date {
                        font-size: 16px;
                        font-family: DIN;
                        font-weight: 400;
                        color: #FFFFFF;
                        line-height: 17px;
                    }
                }
            }
        }
    }


}
</style>